import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Default from './child/Default';
import BlockChain from './child/BlockChain';
import Frontend from './child/Frontend';
import General from './child/General';
import Mobile from './child/Mobile';
import Backend from './child/Backend';
import Detail from '@/components/book/Detail/Detail';
import BooksNav from '@/components/base/booksNav';
import BookCommon from '@/components/base/bookCommon';
import GlobalNav from '@/components/common/nav';

class Com extends Component {
    constructor (props) {
      super(props)
      this.state = {
        list: [
          {
            path: '/book/child/default',
            name: '全部'
          },
          {
            path: '/book/child/frontend',
            name: '前端'
          },
          {
            path: '/book/child/backend',
            name: '后端'
          },
          {
            path: '/book/child/mobile',
            name: '移动开发'
          },
          {
            path: '/book/child/blockchain',
            name: '区块链'
          },
          {
            path: '/book/child/General',
            name: '通用'
          }
        ]
      }
    }  
    componentDidMount(){
      window.addEventListener('scroll', this.handleScroll);	
      var books = document.getElementsByClassName('Wrapper-left')[0]
      books.style.display='block';
      // this.props.history.go(0) 
    }
    componentWillUnmount() {
          window.removeEventListener('scroll', this.handleScroll);	
          var books = document.getElementsByClassName('Wrapper-left')[0]
          books.style.display='none';
          
      }
    handleScroll(){
      console.log(window.scrollY)
      var obj = document.getElementsByClassName('common-header')[0];
      var obj1 = document.getElementsByClassName('headerBox')[0];
      // var obj2 = document.getElementsByClassName('sectionBox')[0];
      if (window.scrollY >= 1) {
              obj.style.display= 'none';
              obj1.style.position = 'fixed';
              obj1.style.top = '0px';
              obj1.style.zIndex = '100';
            }else{
              obj.style.display = 'block';
              obj1.style.position = 'static';
              obj1.style.top = '60px';
            }
    }
   
    render () {
        return (
            <div className = "container">
            <GlobalNav />
            <BooksNav 
            style = {
              {
                backgroundColor: '#fff',
                color: '#27a',
                borderTop:'1px solid #cecece'
              }
            }
            list = { this.state.list }
            />
            <BookCommon/>
            <Switch>
                <Route path="/book/child/default" component={ Default } />
                <Route path="/book/child/blockchain" component={ BlockChain} />
                <Route path="/book/child/frontend" component={ Frontend } />
                <Route path="/book/child/General/" component={ General } />
                <Route path="/book/child/mobile" component={ Mobile } />
                <Route path="/book/child/backend" component={ Backend } />
                <Route path="/book/child/detail" component={ Detail } />
                <Redirect from = '/book' to="/book/child/default" />
            </Switch>
        </div>
        )
    }
}

export default Com;
